<template>
	<view>
		<drag-box
		:pos_x="pos_x"
		:pos_y="pos_y" 
		:start_scale="start_scale" 
		:opa="opa" 
		:drag_able="drag_able"
		:stop_here="stop_here"
		@locationChanged="locationChanged"
		@scaleChanged="scaleChanged"
		>
			<view class="current">
				<view class="current-tx">
					<view class="current-txt">正在表演</view>
					<view class="current-img"><image style="width: 100%; height: 100%;" src="../../static/tx3.jpg"/></view>
				</view>
				<view class="current-name">甜辣妹妹</view>
				<view class="current-nl">
					<view class="current-nl-jd"></view>
				</view>
				<view class="current-sz">100/4000</view>
			</view>
		</drag-box>
	</view>
</template>

<script>

	import dragBox from '@/components/drag-box/drag-box.vue'
	
	export default {
		components: {
			dragBox,
		},
		props: {
			pos_x: { type: Number, default: 0 },
			pos_y: { type: Number, default: 0 },
			start_scale: { type: Number, default: 1 },
			opa: { type: Number, default: 1 },
			drag_able: { type: Boolean, default: true},
			stop_here: { type: Boolean, default: false},
			space: {
				type: Number,
				default: 50
			},
			cpt_id: {
				type: Number,
				default: 0
			},
			example: {
				type: Boolean,
				default: false
			}
		},
		name:"current-perfrom",
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
	
	.current {
		width: 170px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.current-tx {
		position: relative;
	}
	
	.current-img {
		width: 100px;
		height: 100px;
		border-radius: 50px;
		overflow: hidden; 
	}
	
	.current-txt {
		width: 120px;
		height:30px;
		display: flex;
		justify-content: center;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 5px;
		position: absolute;
		bottom: -5px;
		left: -10px;
		z-index: 999;
		font-size: 20px;
	}
	
	.current-name {
		font-size: 24px;
		font-weight: bold;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
		margin: 15px 0;
	}
	
	.current-nl {
		width: 160px;
		height: 10px;
		border-radius: 5px;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 0px 0px 4px rgba(255, 255, 255, 1);
		position: relative;
	}
	
	.current-nl-jd {
		width: 10%;
		position: absolute;
		border-radius: 5px;
		height: 10px;
		background-color: #ff2440;
		top: 0;
		left: 0;
	}
	
	.current-sz {
		font-size: 16px;
		color: #fff;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
	}
</style>